<template>
  <div class="login-view">
    <!--    左侧介绍模块区域-->
    <div class="intro-area">
      <p>买买买后台管理系统 &gt;</p>
      <p>输入你的个人信息开始使用!</p>
    </div>
    <!--    右侧登录模块区域-->
    <div class="login-form-area">
      <h2>登录</h2>
      <el-form ref="loginFormRef" :model="loginForm" label-width="0" :rules="loginFormRules">
        <el-form-item prop="name">
          <el-input v-model="loginForm.name" placeholder="请输入登录名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginView',
  data() {
    const checkName = (rule, value, callback) => {
      if (value.trim() === '') {
        return callback(new Error('账号不可为空'))
      } else {
        callback()
      }
    }
    const checkPassword = (rule, value, callback) => {
      if (value.trim() === '') {
        return callback(new Error('密码不可为空'))
      } else {
        callback()
      }
    }
    return {
      // 登录信息的form表单对象
      loginForm: {
        name: '',
        password: ''
      },
      // 登录表单的校验规则
      loginFormRules: {
        name: [
          { validator: checkName, trigger: 'blur' }
        ],
        password: [
          { validator: checkPassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 当登录按钮被点击时  触发登陆事件 发起Ajax请求登录
    async submitLogin() {
      // console.log(this)
      const { data: res } = await this.$http.get('/merchant/login', {
        params: {
          name: this.loginForm.name,
          pwd: this.loginForm.password
        }
      })
      console.log(res)
      if (res.meta.status !== 200) return this.$message(res.meta.message)
      this.$message('登录成功')
      sessionStorage.setItem('id', res.recordset[0].mid)
      sessionStorage.setItem('mname', res.recordset[0].mname)
      this.$router.push('/home/' + res.recordset[0].mid)
    }
  }
}
</script>

<style scoped lang="less">
.login-view {
  height: 100%;
  background: url(../assets/login-background.png) no-repeat;
  background-size: 100%;
}

.intro-area {
  position: absolute;
  top: 60%;
  left: 20%;
  color: #fff;
  background-color: transparent;
  text-align: left;

  p:first-child {
    font-size: 30px;
  }
}

.login-form-area {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 40%;
  right: 20%;
  background-color: #fff;
  border-radius: 15px;

  h2 {
    padding-left: 30px;
    text-align: left;
  }

  .el-form-item {
    margin-top: 30px;
    .el-input {
      width: 90%;
    }

    .el-button {
      width: 90%;
    }
  }
}

.el-form-item__error {
  padding-left: 20px;
}
</style>
